import React from 'react';
import {connect} from 'react-redux';
class ToolTripleImagesPreview extends React.Component {
	constructor(props) {
		  super(props);
	}
	findCard(id) {
		let cards = this.props.dataSource;
		const card = cards.filter(c => c.id === id)[0];
		return {
		  card,
		  index: cards.indexOf(card)
		};
	}
	render() {
		const {card} = this.findCard(this.props.dataId);
		let textMark="";
		let text="";		
		let textMark1="";
		let text1="";	
		let textMark2="";
		let text2="";
		if(card.formData["myText"+card.mix]!=""){
			textMark = <div style={{
							 backgroundColor:"#666",
							 position:"absolute",
							 width:"160px",
							 height:"32px",
							 opacity:"0.8",
							 bottom:"4px"}}>
				</div>;
			text = <div style={{textAlign:"center",
						     fontSize:"18px",
							 position:"absolute",
							 bottom:"6px",
							 width:"160px",
							 color:"#FFFFFF"}}>
					{card.formData["myText"+card.mix]}
				</div>;
		}
		if(card.formData["myText1"+card.mix]!=""){
			textMark1 = <div style={{
							 backgroundColor:"#666",
							 position:"absolute",
							 width:"160px",
							 height:"32px",
							 opacity:"0.8",
							 bottom:"4px"}}>
				</div>;
			text1 = <div style={{textAlign:"center",
						     fontSize:"18px",
							 position:"absolute",
							 bottom:"6px",
							 width:"160px",
							 color:"#FFFFFF"}}>
					{card.formData["myText1"+card.mix]}
				</div>;
		}
		if(card.formData["myText2"+card.mix]!=""){
			textMark2 = <div style={{
							 backgroundColor:"#666",
							 position:"absolute",
							 width:"160px",
							 height:"32px",
							 opacity:"0.8",
							 bottom:"4px"}}>
				</div>;
			text2 = <div style={{textAlign:"center",
						     fontSize:"18px",
							 position:"absolute",
							 bottom:"6px",
							 width:"160px",
							 color:"#FFFFFF"}}>
					{card.formData["myText2"+card.mix]}
				</div>;
		}
		return (
		   <div  style={{position:"relative",display:"flex",backgroundColor:card.formData["bgColor"+card.mix]}}>
			   <div style={{float:"left"}}>
					<img src={card.formData["myPic"+card.mix]} style={{width:"106px"}} /> 
					{textMark}
					{text}
			   </div>
			   <div style={{float:"left"}}>
					<img src={card.formData["myPic1"+card.mix]} style={{width:"106px"}} /> 
					{textMark1}
					{text1}
			   </div>
			   <div style={{float:"left"}}>
					<img src={card.formData["myPic2"+card.mix]} style={{width:"106px"}} /> 
					{textMark2}
					{text2}
			   </div>
		   </div>
		);
	}
}
ToolTripleImagesPreview.defaultProps = {
};
function mapStateToProps(state){
  return {
    dataSource:state.todoMVCReducer
  }
};
export default connect(mapStateToProps)(ToolTripleImagesPreview);

//https://segmentfault.com/q/1010000008860005  提问